<template>
  <!-- 调账 -->
  <div>
    <!-- 本金 -->
    <div class="flex_y_center" style="margin-bottom: 15px">
      <div class="inp_title">
        <span>*</span>
        余额(元)：
      </div>
      <el-input
        v-model="tuneForm.card_balance"
        placeholder="请输入调账金额"
        style="width: 50%"
      >
        <template slot="prepend">￥</template>
      </el-input>
    </div>
    <!-- 赠送金 -->
    <div class="flex_y_center" style="margin-bottom: 15px">
      <div class="inp_title">
        <span>*</span>
        赠送金(元)：
      </div>
      <el-input
        v-model="tuneForm.gift_balance"
        placeholder="请输入赠送金额"
        style="width: 50%"
      >
        <template slot="prepend">￥</template>
      </el-input>
    </div>
    <div class="flex_between" style="margin-top: 15px">
      <div></div>
      <el-button type="primary" @click="adjustment">保存</el-button>
    </div>
  </div>
</template>

<script>
  import { adjustmentPrepaid } from '@/api/storedValue'

  export default {
    props: {
      oClearBool: {
        type: Boolean,
        default: false,
      },
      oPrepaidId: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        storedVal: [], // 存放获取到的储值卡类型
        // 调账传递参数
        tuneForm: {
          card_balance: '', // 余额
          gift_balance: '', // 赠送金额
        },
      }
    },
    watch: {
      // 该变量为true时，证明对话框关闭，初始化 tuneForm 对象量属性值
      oClearBool(newValue) {
        if (newValue) {
          for (let item in this.tuneForm) {
            this.tuneForm[item] = ''
          }
        }
      },
    },
    methods: {
      // 调账
      adjustment() {
        this.tuneForm.prepaid_id = this.oPrepaidId
        adjustmentPrepaid(this.tuneForm)
          .then(() => {
            this.$emit('send')
          })
          .catch((err) => {
            // 提示用户未开通当前选择储值卡
            this.$message.warning(err.message)
            this.$emit('send')
          })
      },
    },
  }
</script>

<style scoped>
  .flex_between {
    display: flex;
    justify-content: space-between;
  }
  .inp_title {
    width: 30%;
    text-align: right;
  }
  .margin_bottom_15 {
    margin-bottom: 15px;
  }
  span {
    color: red;
  }
</style>
